Runhang Notes

Canvas Basic

Canvas is a HTML element, can be manipulated by DOM or CSS. Also, inside of canvas tag, you can add message when canvas is not supported.

<canvas id="canvas" height="150" width="350">
	sorry your browser does not support canvas.
</canvas>

Once we have the element, we can use canvas.getContext() to check and get context.

var canvas = document.getElementById('canvas');

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Canvas Grid

In default, 1 unit refers to 1 px, original point (0, 0) is in the top-left corner.

Canvas Shape

  • rectangle:

    fillRect(x, y, width, height): Draws a filled rectangle.

    strokeRect(x, y, width, height): Draws a rectangular outline.

    clearRect(x, y, width, height): Clears the specified rectangular area, making it fully transparent.

    var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

  • path: create path -> draw path -> close path -> render path

    beginPath(): Creates a new path.

    Path methods: Methods to set different paths for objects.

    closePath(): Closes the path so that future drawing commands are once again directed to the context.

    stroke(): Draws the shape by stroking its outline.

    fill(): Draws a solid shape by filling the path’s content area.

    arc(x, y, radius, startAngle, endAngle, anticlockwise): Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by anticlockwise (defaulting to clockwise).

    arcTo(x1, y1, x2, y2, radius): Draws an arc with the given control points and radius, connected to the previous point by a straight line.

    quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve from the current pen position to the end point specified by x and y, using the control point specified by cp1x and cp1y.

    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve from the current pen position to the end point specified by x and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).

    var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

  • path2d:

    Path2D.addPath(path [, transform]): Adds a path to the current path with an optional transformation matrix.

    function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

Canvas Style

fillStyle = color: Sets the style used when filling shapes.

strokeStyle = color: Sets the style for shapes’ outlines.

implmenet style config before ctx.fill() or ctx.stroke()

Canvas Text

fillText(text, x, y [, maxWidth]): Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

strokeText(text, x, y [, maxWidth]): Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

ctx.font = '48px serif'; can be used to contorl the font style

Canvas Image

HTMLImageElement: These are images created using the Image() constructor, as well as any img element.

HTMLVideoElement: Using an HTML video element as your image source grabs the current frame from the video and uses it as an image.

HTMLCanvasElement: You can use another canvas element as your image source.

Three Basic

Three Components

  • A Scene new THREE.Scene();

  • A Camera new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    THREE.PerspectiveCamera is a projection that mimic the way the human eye sees. It is the most common one for 3D scene.

    PerspectiveCamera( field of view, aspect ratio, near plane, far plane )

  • A Renderernew THREE.WebGLRenderer();

with these component above, we can render a scene with the camera

Basic Process

  • Create a scene, camera and a renderer

  • Createt your object and add it into the scene

  • Modify your camera position

  • Set renderer size

  • Append renderer.domElement to the target DOM

  • Add requestAnimationFrame and render it

     function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
  }
  animate();

  • Add animation into the animation function to make things move

Others

  • Compatibility Check

    // add https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js first

if (Detector.webgl) {
  // Initiate function or other initializations here
  animate();
} else {
  var warning = Detector.getWebGLErrorMessage();
  document.querySelector('body').appendChild(warning);
}

Text

← Java-Basic →